<template>
    <div>
        <el-form :model="User" ref="User" label-width="100px" class="demo-User">
            <el-form-item label="角色" prop="RoleID">
                <el-select v-model="User.RoleID" placeholder="请选择角色">
                    <el-option v-for="(item, index) in roles" :key="index" :label="item.RoleName"
                        :value="item.RoleID"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="头像" prop="ImgID">
                <el-select v-model="User.ImgID" placeholder="请选择头像">
                    <el-option v-for="(item, index) in images" :key="index" :label="item.Title" :value="item.ImgId">
                        <img style="width: 30px;height: 30px;vertical-align: text-bottom;" :src="imgUrl + item.Path">
                        {{ item.Title }}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户名" prop="LoginName">
                <el-input v-model="User.LoginName"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="UserName">
                <el-input v-model="User.UserName"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="Sex">
                <el-radio-group v-model="User.Sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="手机号码" prop="Phone">
                <el-input v-model="User.Phone"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" required>
                <el-form-item prop="Birthday" style="width: 200px;">
                    <el-date-picker type="date" placeholder="选择出生日期" v-model="User.Birthday"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>

            </el-form-item>
            <el-form-item label="状态" prop="Status">
                <el-switch v-model="User.Status"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('User')">保存修改</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="UpdatePwd()">修改个人密码</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="修改密码" append-to-body :visible.sync="UpdateDialogVisible" width="450">
            <Edit :dialogVisible.sync="UpdateDialogVisible"></Edit>
        </el-dialog>
    </div>
</template>

<script>
import base from '@/plugins/base';
import Edit from './Edit.vue';

export default {
    name: 'Personal',
    data() {
        return {
            roles: [],
            images: [],
            imgUrl: '',
            User: {
                UserID: 0,
                UserName: '',
                Sex: '男',
                ImgID: 0,
                RoleID: 0,
                Birthday: '',
                Phone: '',
                LoginName: '',
                LoginPwd: '',
                Status: true,
                LastTime: new Date()

            },
            data: JSON.parse(sessionStorage.getItem('User')),
            UpdateDialogVisible: false
        }
    },
    methods: {
        //提交表单
        submitForm(User) {
            this.$refs[User].validate((valid) => {
                if (valid) {
                    //axios 提交
                    //this.ruleForm
                    this.User.Birthday.setDate(this.User.Birthday.getDate() + 1);
                    this.axios({
                        method: 'put',
                        url: 'Users',
                        params: {},
                        data: this.User
                    }).then(res => {
                        console.log('res: ', res);
                        if (res.data.code > 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });

                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })
                        }
                    })
                        .catch(err => {
                            console.log('err: ', err);

                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }, UpdatePwd() {
            this.UpdateDialogVisible = true;
        },
    },

    created() {
        this.axios({
            method: 'get',
            url: 'Roles'
        }).then(res => {
            console.log('res: ', res);
            this.roles = res.data.data;
        })

        this.axios({
            method: 'get',
            url: 'Images'
        }).then(res => {
            console.log('res: ', res);
            this.images = res.data.data;
        })

        this.axios({
            method: 'get',
            url: 'Users',
            params: { id: this.data.UserId },
            data: {},
        }).then(res => {
            this.User = JSON.parse(JSON.stringify(res.data.data));
            this.User.Birthday = new Date(this.User.Birthday);
        })

        this.imgUrl = base.imgUrl;

    }, 
    components: {
        Edit
    }
}
</script>

<style scoped></style>